<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>区域管理</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3rm9RTu5fYIX6AAdZCtrw675cCYnc4lA"></script>

    <style>
        table,
        table tr th,
        table tr td {
            border: 1px solid #0094ff;
        }

        table {
            width: 100%;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        #allmap {
            width: 60%;
            height: 80%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
</head>

<body>
    <div style="width:20%;height:1000px;font-size:18px;background-color:#51a09b;float:left">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active" style="width:100%">
                <a href="#home" data-toggle="tab">区域管理</a>
            </li>
            <!--<li style="width:50%">
            <a href="#add" data-toggle="tab">添加区域</a>
        </li>-->
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <!--<div style="width:100%;height:50px;font-size:18px">
                <span style="width:50%;display: block;float:left">区域名称</span>
                <span style="width:50%;display:block;float:left">操作</span>
            </div>-->
                <div class="panel-group" id="accordion" style="text-align: center">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseOne" class="myarea" id="jiangganqu">
                                江干区
                            </a>
                            </h4>
                        </div>


                        <div id="collapseOne" class="panel-collapse collapse">
                            <div class="panel-body" id="jiangganbody">

                                <div class="panel-group" id="jiangganaccordion">
                                <div class="panel panel-default" id="xiasha" style="width:100%;text-align:center">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#jiangganaccordion"
                                               href="#collapseplo1">
                                            下沙派出所
                                        </a>
                                        </h4>
                                    </div>
                                    <div id="collapseplo1" class="panel-collapse collapse" style="width:100%">
                                        <div class="panel-body" id="xiashabody">
                                            <table style="width:100%">

                                                <tr>
                                                    <td>社区名称</td>
                                                    <td>修改</td>
                                                    <td>查看</td>
                                                    <td>删除</td>
                                                </tr>
                                                <tr>
                                                    <td><a href="#"> 白杨社区 </a></td>
                                                    <td>
                                                        <a href="#">
                                            <span class="glyphicon glyphicon-ok"></span>
                                            </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                <span class="glyphicon glyphicon-list-alt"></span>
                                            </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                <span class="glyphicon glyphicon-remove"></span>
                                            </a>
                                                    </td>

                                                </tr>
                                                <tr>
                                                    <td><a href="#"> 高沙社区</a></td>
                                                    <td>
                                                        <a href="#">
                                                    <span class="glyphicon glyphicon-ok"></span>
                                                </a>
                                                    </td>

                                                    <td>
                                                        <a href="#">
                                                    <span class="glyphicon glyphicon-list-alt"></span>
                                                </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                <span class="glyphicon glyphicon-remove"></span>
                                            </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><a href="#"> 下沙社区</a></td>
                                                    <td>
                                                        <a href="#">
                                                    <span class="glyphicon glyphicon-ok"></span>
                                                </a>
                                                    </td>

                                                    <td>
                                                        <a href="#">
                                                    <span class="glyphicon glyphicon-list-alt"></span>
                                                </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                <span class="glyphicon glyphicon-remove"></span>
                                            </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4">
                                                        <input type="button" class="btn btn-default" value="新增区域">
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="panel panel-default" style="width:100%;text-align:center">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#jiangganaccordion" href="#collapseplo2">
                                            高沙派出所
                                        </a>
                                        </h4>
                                    </div>
                                    <div id="collapseplo2" class="panel-collapse collapse" style="width:100%">
                                        <div class="panel-body">
                                            <table>
                                                <tr>
                                                    <td><a href="#"> 白杨社区 </a></td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-ok"></span>
                                                    </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-remove"></span>
                                                    </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-list-alt"></span>
                                                    </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><a href="#"> 高沙社区</a></td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-ok"></span>
                                                    </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-remove"></span>
                                                    </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-list-alt"></span>
                                                    </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><a href="#"> 金沙社区</a></td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-ok"></span>
                                                    </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-remove"></span>
                                                    </a>
                                                    </td>
                                                    <td>
                                                        <a href="#">
                                                        <span class="glyphicon glyphicon-list-alt"></span>
                                                    </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4">
                                                        <input type="button" class="btn btn-default" value="新增区域">
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                    <div class="panel panel-default" style="text-align: center">
                                        <input type="button" class="btn btn-default" value="新增区域">
                                 </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="myarea" id="gongshuqu">
                                拱墅区
                            </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="myarea" id="xihuqu">
                                西湖区
                            </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                拱墅区
                            </a>
                            </h4>
                        </div>
                        <div id="collapsefour" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                拱墅区
                            </a>
                            </h4>
                        </div>
                        <div id="collapsefive" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                拱墅区
                            </a>
                            </h4>
                        </div>
                        <div id="collapsesix" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                拱墅区
                            </a>
                            </h4>
                        </div>
                        <div id="collapseSeven" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                拱墅区
                            </a>
                            </h4>
                        </div>
                        <div id="collapseEight" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                拱墅区
                            </a>
                            </h4>
                        </div>
                        <div id="collapseNine" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="tab-pane fade" id="add">我是添加区域</div>
        </div>
    </div>
    <div style="width:80%;height:1000px;border:#ccc solid 1px;float:right" id="allmap"></div>
    <script>
        // 左侧小菜单的展开效果
        $(function () {
            $('#myTab li:eq(1) a').tab('show'); //tab插件
        });
    
        // 百度地图API功能
        var map = new BMap.Map("allmap"); //创建地图实例
        map.centerAndZoom(new BMap.Point(120.19, 30.26), 13); //第一个参数：根据创建好的点为中心，创建出地图；第二个参数是地图缩放级别，最大19，最小0，实际上3就够用了
        map.enableScrollWheelZoom(); //启用滚轮放大缩小

        $("a.myarea").click(function(){
                var areaName=$(this).attr("id");   //获取a的id名字
                var area;
                switch (areaName) {
                    case("jiangganqu"):
                        {
                            area="杭州市江干区";
                        }
                        break;
                    case("gongshuqu"):
                        {
                            area="杭州市拱墅区";
                        }
                        break;
                    case("xihuqu"):
                        {
                            area="杭州市西湖区";
                        }
                        break;
                }; 
                getBoundary(area); 
            });
             

        function getBoundary(area) {
            var bdary = new BMap.Boundary();
            bdary.get(area, function (rs) { //获取行政区域
                map.clearOverlays(); //清除地图覆盖物       
                var count = rs.boundaries.length; //行政区域的点有多少个
                if (count === 0) {
                    alert('未能获取当前输入行政区域');
                    return;
                }
                var pointArray = [];
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], { // 创建多边形覆盖物
                        strokeWeight: 2, //边线的宽度，以像素为单位。
                        strokeColor: "#ff0000" //边线的颜色
                    }); //建立多边形覆盖物
                    map.addOverlay(ply); //添加覆盖物
                    pointArray = pointArray.concat(ply.getPath());
                }
                map.setViewport(pointArray); //调整视野  
                addlabel();
            });
        }

        // setTimeout(function () {
        //     getBoundary();
        // }, 2000);

        function addlabel() {
            var pointArray = [
                new BMap.Point(121.716076, 23.703799),
                new BMap.Point(112.121885, 14.570616),
                new BMap.Point(123.776573, 25.695422)
            ];
            var optsArray = [{}, {}, {}];
            var labelArray = [];
            var contentArray = [
                "",
                "",
                ""
            ];
            for (var i = 0; i < pointArray.length; i++) {
                optsArray[i].position = pointArray[i];
                labelArray[i] = new BMap.Label(contentArray[i], optsArray[i]);
                labelArray[i].setStyle({
                    color: "red",
                    fontSize: "12px",
                    height: "20px",
                    lineHeight: "20px",
                    fontFamily: "微软雅黑"
                });
                map.addOverlay(labelArray[i]);
            }
        }
        getBoundary("杭州市江干区");
    </script>
</body>

</html>